<template>
    <div class="incontent">
        <div class="invation_user">
          <img :src="invo_img" alt="">
          <p style="-webkit-box-orient: vertical;">{{invo_name}}</p>
        </div>
        <div class="invation_right">
          <img :src="`${constant.imgUrl}design/icon_circulinva.png`" alt="" v-show="show_user" @click="invation()">
          <img :src="user_img" alt="" v-show="!show_user">
        </div>
       <a class="orgin_team" @click="origanteam()">立即组队</a>

        <v-invation ref="invation" :owner_user_id="option.owner_user_id"></v-invation>
    </div>
</template>
<script>
import Invationmenber from '@/pages/components/invationmenber'
import { invitation, myteamJoin } from '@/api/buriedPoint'
export default {
	name: 'Invationdetail',
	components: {
		'v-invation': Invationmenber
	},
	data() {
		return {
			constant: this.$constant,
			inviter_user_id: '',
			invo_img: '',
			user_img: '',
			invo_name: '无邀请者',
			show_user: true
		}
	},
	onLoad(option) {
	    this.option = option
		this.invationdetail()
	},
	methods: {
		invationdetail() {
			let data = {
				'id': this.option.id
			}
			invitation(data).then((response) => {
				console.log(response)
				if (response.status == 'success') {
					if (response.data.inviter.length !== 0) {
						this.invo_name = response.data.inviter.nick_name
						this.invo_img = response.data.inviter.user_picture
						this.inviter_user_id = response.data.inviter.inviter_user_id
					}
					if (response.data.invitee.length !== 0) {
						this.show_user = !this.show_user
						this.user_img = response.data.invitee.user_picture
					}
				}
			})
		},
		origanteam() { // 邀请加入团队
			// var id = 'U74UL7LAKI'
			let data = {
				'id': this.option.id,
				'inviter_user_id': this.inviter_user_id
			}

			myteamJoin(data).then((response) => {
				if (response.status == 'success') {
				    uni.showToast({
						title: response.data,
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: response.errors.message,
						icon: 'none'
					})
				}
			})
		},
		invation() {
			this.$refs.invation.$refs.popup.open()
		}
	}
}
</script>

<style lang="scss" scoped>
	.incontent {
		width: 100%;
		height: 1330px;
		float: left;
		background: url($imgUrl+'design/icon_invationdetail.png');
		background-size: 100% 1330px;
	}

	.invation_user {
		width: 136px;
		height: auto;
		float: left;
		margin-top: 185px;
		margin-left: 98px;
	}

	.invation_user img {
		width: 136px;
		height: 136px;
		float: left;
		border-radius: 50%;
		border: 2px solid #cccccc;
		margin-bottom: 25px;
	}

	.invation_user p {
		font-size: 34px;
		color: #222222;
		text-align: center;
		display: -webkit-box;
		word-break: break-all;
		-webkit-line-clamp: 1;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
		text-overflow: ellipsis;
		float: left;
	}

	.invation_right {
		float: right;
		margin-top: 183px;
		margin-right: 95px;
		width: 140px;
		height: 140px;
	}

	.invation_right img {
		width: 140px;
		height: 140px;
		float: left;
	}
	.orgin_team {
		width: 560px;
		height: 100px;
		float: left;
		border-radius: 47px;
		background: -webkit-linear-gradient(rgb(253, 46, 129), rgb(253, 42, 91));
		text-align: center;
		line-height: 100px;
		font-size: 36px;
		color: white;
		margin-top: 60%;
		margin-left: 98px;
	}

</style>
